import {useState} from 'react';
import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {TextInput} from './TextInput.tsx';

<Meta
  title="Components/Inputs/Text input"
  component={TextInput}
  argTypes={{
    readOnly: {
      control: {type: 'boolean'},
      description:
        'Defines if the input should be read only. If defined so, the user cannot change the value of the input.',
      table: {type: {summary: 'boolean'}},
    },
    onChange: {
      description: 'The handler called when the value of the input changes.',
      table: {type: {summary: '(newValue: string) => void'}},
    },
  }}
  args={{
    value: '',
    placeholder: 'Please enter a value in the TextInput',
  }}
/>

# Text input

## Usage

Text input allows the user to enter content and data when the expected user input is a single line of text.

### Placeholder text

The placeholder text provides tips or examples of items to enter. Placeholder text disappears when the user begins entering data.

## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      const [value, setValue] = useState(args.value);
      return <TextInput {...args} value={value} onChange={setValue} />;
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Variation on readOnly

<Canvas>
  <Story name="ReadOnly">
    {args => {
      return (
        <>
          <TextInput {...args} readOnly={false} />
          <TextInput {...args} readOnly={true} />
          <TextInput value="Read only text input" readOnly={true} />
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on invalid

<Canvas>
  <Story name="Invalid">
    {args => {
      return (
        <>
          <TextInput {...args} invalid={false} />
          <TextInput {...args} invalid={true} />
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on character left label

<Canvas>
  <Story name="Character left label">
    {args => {
      const [value, setValue] = useState('');
      const handleChange = newValue => setValue(newValue);
      return (
        <TextInput
          placeholder="Type here to update the character left label"
          value={value}
          onChange={handleChange}
          characterLeftLabel={`${250 - value.length} characters left`}
        />
      );
    }}
  </Story>
</Canvas>
